<template>
    <div class="data-review">
        <i class="el-icon-close" @click="closeReview"></i>
        <div class="review-title"><span>数据审核</span></div>
        <div class="review-left">
            <div class="device-base-info-title"><span>设备基本信息</span></div>
            <div class="device-base-info">
                <div class="base-info">
                    <div class="base-info-content"><span class="base-info-tag">点位名称:</span><span
                            class="base-info-value">{{ deviceInfo.devicePointName }}</span></div>
                    <div class="base-info-content"><span class="base-info-tag">巡视值:</span><span
                            class="base-info-value">{{ deviceInfo.patrolValue }}</span></div>
                    <div class="base-info-content"><span class="base-info-tag">巡视时间:</span><span
                            class="base-info-value">{{ deviceInfo.patrolTime }}</span></div>
                </div>
            </div>
            <div class="device-detail-info-title"><span>设备详细信息</span></div>
            <div class="device-detail-info">
                <div class="img-url"><img v-if="imageUrl" :src="imageUrl" alt="告警图片" /></div>
                <div class="recognition-result">
                    <span>识别结果:</span>
                    <el-radio v-model="deviceInfo.recognitionState" label="R">识别正确</el-radio>
                    <el-radio v-model="deviceInfo.recognitionState" label="W">识别错误</el-radio>
                    <el-radio v-model="deviceInfo.recognitionState" label="U">无法识别</el-radio>
                </div>
                <div class="detail-info">
                    <el-input v-model="deviceInfo.checkValue" placeholder="请输入" :disabled="deviceInfo.recognitionState == 'R'">
                        <span slot="prefix">修正值:</span>
                    </el-input>
                </div>
                <div class="detail-info">
                    <el-select v-model="deviceInfo.alarmLevel" placeholder="请选择" :popper-append-to-body="false">
                        <span slot="prefix">告警等级:</span>
                        <el-option v-for="item in alarmLevels" :key="item.alarmLevel" :label="item.alarmLevelName" :value="item.alarmLevel" />
                    </el-select>
                </div>
                <div class="detail-info">
                    <el-select v-model="deviceInfo.defectLevel" placeholder="请选择" :popper-append-to-body="false">
                        <span slot="prefix">缺陷等级:</span>
                        <el-option v-for="item in defectLevels" :key="item.defectLevel" :label="item.defectLevelName"
                            :value="item.defectLevel" />
                    </el-select>
                </div>
                <el-button @click="review">提交审核</el-button>
            </div>
        </div>
        <div class="review-right">
            <div class="history-data-title"><span>历史曲线&历史数据</span></div>
            <div class="history-data-content">
                <div class="history-data-search">
                    <div class="custom-date">
                        <span>开始时间：</span>
                        <el-date-picker v-model="startTime" type="datetime" placeholder="请选择开始时间" />
                    </div>
                    <div class="custom-date">
                        <span>结束时间：</span>
                        <el-date-picker v-model="endTime" type="datetime" placeholder="请选择结束时间" />
                    </div>
                    <div class="custom-btn">
                        <el-button @click="search">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>
                <div class="history-data-chart">
                    <canvas id="line-chart" width="1313" height="210"></canvas>
                </div>
                <div class="history-data-table">
                    <el-table :data="historyData" style="width: 100%;" @row-click="displayDeviceInfo">
                        <el-table-column type="index" label="序号" width="80" />
                        <el-table-column prop="devicePointName" label="点位名称" width="180" />
                        <el-table-column prop="patrolTime" label="巡视时间" width="180" />
                        <el-table-column prop="checkValue" label="修正值" />
                        <el-table-column prop="patrolValue" label="巡视值" />
                        <el-table-column prop="alarmLevelName" label="告警等级" />
                        <el-table-column prop="recognitionTypeName" label="识别类型" />
                        <el-table-column prop="checkStatusName" label="审核状态" />
                    </el-table>
                </div>
                <el-divider />
                <div class="history-data-page">
                    <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" :current-page.sync="currentPage" @current-change="handlePage"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Chart from 'chart.js/auto'


export default {
    data() {
        return {
            deviceInfo: {
                devicePointName: null,
                patrolValue: null,
                patrolTime: null,
                recognitionState: null,
                checkValue: null,
                alarmLevel: null,
                defectLevel: null,
                taskRunCode: null,
                devicePointCode: null,
                masterId: null
            },
            imageUrl: null,
            alarmLevels: [],
            defectLevels: [],
            startTime: null,
            endTime: null,
            historyData: [],
            currentPage: null,
            pageSize: 8,
            total: null,
            labels: [],
            yData: [],
            myChart: null 
        }
    },
    methods: {
        review() {
            axios.post(`http://${this.$store.getters.serverUrl}/station/taskData/batchReview`,
        {
          alarmLevel: this.deviceInfo.alarmLevel,
          checkValue: this.deviceInfo.checkValue,
          defectLevel: this.deviceInfo.defectLevel,
          devicePointCodeList: [this.deviceInfo.devicePointCode],
          recognitionState: this.deviceInfo.recognitionState,
          taskRunCode: this.deviceInfo.taskRunCode,
        },
        {
          params: {
            masterId: this.deviceInfo.masterId
          },
          headers: {
            Gz_security_token: this.$store.getters.Gz_security_token
          }
        }).then(({ data }) => {
          if (data.success) {
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.getPointHistoryDataList(this.currentPage)
          } else {
            this.$message({
              type: 'error',
              message: '审核失败'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '审核失败'
          })
        })
        },
        search() {
            this.currentPage = 1
            this.getPointHistory()
            this.getPointHistoryDataList(this.currentPage)
        },
        reset() {
            this.startTime = null
            this.endTime = null
        },
        handlePage(currentPage) {
         this.getPointHistoryDataList(currentPage)
       },
       displayDeviceInfo(row){
        this.deviceInfo.devicePointName = row.devicePointName
        this.deviceInfo.patrolValue = row.patrolValue
        this.deviceInfo.patrolTime = row.patrolTime
        this.deviceInfo.recognitionState = row.recognitionState
        this.deviceInfo.checkValue = row.checkValue
        this.deviceInfo.alarmLevel = row.alarmLevel
        this.deviceInfo.defectLevel = row.defectLevel == null? row.defectLevel:row.defectLevel.toString()
        this.deviceInfo.taskRunCode = row.taskRunCode 
        this.deviceInfo.devicePointCode = row.devicePointCode
        this.getPointImage()
       },
        closeReview(){
        this.$router.push('/szRobot/dashboard/robotMonitor')
        },
        getLabels() {
            return this.labels
        },
        getPointImage() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskResult/getMultimediaInfoByPointCode`, null,
        {
          params: {
            taskRunCode: this.deviceInfo.taskRunCode,
            devicePointCode: this.deviceInfo.devicePointCode,
            masterId: this.deviceInfo.masterId
          },
          headers: {
            Gz_security_token: this.$store.getters.Gz_security_token
          }
        }).then(({ data }) => {
          if (data.success) {
            if (data.data != null && data.data.imageFile != null) {
              this.imageUrl = 'http://' + this.$store.getters.serverUrl + data.data.imageFile
            } else {
                this.imageUrl = null
            }
          }
        })
    },
    getAlarmLevel() {
      axios.post(`http://${this.$store.getters.serverUrl}/station/taskData/getAlarmLevelList`, null, {
        params: {
          masterId: this.deviceInfo.masterId
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.alarmLevels = data.data
        }
      })
    },
    getDefectLevel(){
        axios.post(`http://${this.$store.getters.serverUrl}/station/taskData/getDefectLevelList`, null, {
        params: {
          masterId: this.deviceInfo.masterId
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
          this.defectLevels = data.data
        }
      })
    },
    getPointHistoryDataList(currentPage){
        axios.post(`http://${this.$store.getters.serverUrl}/station/taskResult/getPointHistoryDataList`, 
        {
            curPage: currentPage,
            devicePointCode: this.deviceInfo.devicePointCode,
            endTime: this.formattedTime(this.endTime),
            pageSize: this.pageSize,
            startTime: this.formattedTime(this.startTime)
        }, 
        {
        params: {
          masterId: this.deviceInfo.masterId
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
            if(data.data != null){
                this.historyData = data.data.patrolResultList
                this.total = data.data.pageInfo.total
            }        
        }
      })
    },
    getPointHistory(){
        axios.post(`http://${this.$store.getters.serverUrl}/station/taskResult/getPointHistory`, 
        {
            devicePointCode: this.deviceInfo.devicePointCode,
            endTime: this.formattedTime(this.endTime),
            startTime: this.formattedTime(this.startTime)
        }, 
        {
        params: {
          masterId: this.deviceInfo.masterId
        },
        headers: {
          Gz_security_token: this.$store.getters.Gz_security_token
        }
      }).then(({ data }) => {
        if (data.success) {
            this.labels = []
            this.yData = []
            if(data.data != null){
                if(data.data.patrolTimeList.length <= 10)
                {
                    this.labels = data.data.patrolTimeList
                    this.yData = data.data.valueList.map(item => {
                    return Number.isFinite(+item)? parseInt(item):null
                })
                } else {
                    let unit = Math.floor(data.data.patrolTimeList.length / 10)
                    for(let i = 0; i < 10; i++){
                    this.labels.push(data.data.patrolTimeList[i*unit])
                    this.yData.push(Number.isFinite(+data.data.valueList[i*unit])? parseInt(data.data.valueList[i*unit]):null)
                    }
                }
            }
            this.getChart()        
        }
      })
    },
    formattedTime(dateTime) {
      if (dateTime == null)
        return null
      const year = dateTime.getFullYear()
      const month = (dateTime.getMonth() + 1).toString().padStart(2, '0')
      const day = dateTime.getDate().toString().padStart(2, '0')
      const hour = dateTime.getHours().toString().padStart(2, '0')
      const minute = dateTime.getMinutes().toString().padStart(2, '0')
      const second = dateTime.getSeconds().toString().padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    getChart(){
        if(this.myChart instanceof Chart) {
            this.myChart.destroy()
          }
        const ctx = document.getElementById('line-chart').getContext('2d')
        let gradient = ctx.createLinearGradient(0, 200, 11, 222);
        gradient.addColorStop(0, 'rgba(242, 240, 159, 1)');
        gradient.addColorStop(0.5, 'rgba(102, 255, 123, 1)');
        gradient.addColorStop(1, 'rgba(0, 186, 173, 1)');

        this.myChart = new Chart(ctx, {
            type: 'line', // 图表类型
            data: {
                labels: this.labels, // X轴标签
                datasets: [{
                    label: '', // 数据集名称
                    data: this.yData, // Y轴数据
                    fill: false,
                    backgroundColor: 'rgba(0, 186, 173, 1)', // 数据区域填充颜色
                    borderColor: gradient, // 数据边界线颜色
                    borderWidth: 2, // 数据边界线宽度
                    pointBorderColor: 'rgba(237, 241, 158, 1)',
                    pointBorderWidth: 2,
                    pointStyle: 'circle',
                    pointRadius: 5,
                    tension: 0.6 // 数据边界线弯曲程度0-1
                }]
            },
            options: {
                //目前暂不清楚为什么tooltips无法生效
                tooltips: {
                    enabled: true, // 确保enabled设置为true
                    // 自定义tooltip的回调函数
                    callbacks: {
                        // 自定义标签的tooltiptitle
                        title: function (tooltipItem, data) {
                            return data.labels[tooltipItem[0].index];
                        },
                        // 自定义标签的tooltiplabel
                        label: function (tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.value;
                        }
                    },
                    // 自定义tooltip的样式
                    custom: function (tooltip) {
                        // 自定义样式
                        tooltip.innerHTML = '<div class="custom-tooltip">' + tooltip.innerHTML + '</div>';
                    },
                    // 其他tooltip选项
                    backgroundColor: 'rgba(7, 131, 140, 1)', // 背景颜色
                    borderColor: 'rgba(0, 255, 255, 1)', // 边框颜色
                    borderWidth: 1 // 边框宽度
                },
                responsive: true,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true, // Y轴起始为0
                        ticks: {
                            fontSize: 16, // 设置x轴刻度字体大小
                            fontWeight: 400,
                            color: 'rgba(108, 128, 151, 1)',
                            stepSize: 0.2
                        },
                        grid: {
                            color: 'rgba(108, 128, 151, 0.3)'
                        },
                        border: {
                            dash: [3, 3]
                        }
                    },
                    x: {
                        beginAtZero: true, // X轴起始为0
                        ticks: {
                            fontSize: 14, // 设置x轴刻度字体大小
                            fontWeight: 400,
                            color: 'rgba(193, 206, 222, 1)',
                            maxRotation: 0,
                            // callback: function (value, index, values) {
                            //     let xLabels = this.getLabels()
                            //     return xLabels[index].split(' ')[0]
                            // },
                        },
                        grid: {
                            color: 'rgba(108, 128, 151, 0.3)'
                        },
                        border: {
                            dash: [3, 3]
                        }
                    }
                }
            }
        })
    }
    },
    created() {
        if(this.$route.query){
        this.deviceInfo = this.$route.query
        }
        this.currentPage = 1
        this.total = 0
        this.getPointImage()
        this.getAlarmLevel()
        this.getDefectLevel()
        this.getPointHistory()
        this.getPointHistoryDataList(this.currentPage)
    }
}
</script>

<style scoped>
.data-review {
    position: relative;
    margin-left: 20px;
    padding: 25px;
    width: 1876px;
    height: 940px;
    background: rgba(1, 55, 66, 0.8);
    border: 1px solid rgba(0, 188, 191, 1);
    box-shadow: inset 20px 0px 35px -9px rgba(6, 115, 115, 1);

    .el-icon-close{
        position: absolute;
        right: 10px;
        top: 10px;
        background: rgba(22, 189, 202, 1);
        border: 4px solid rgba(22, 189, 202, 1);
        box-shadow: 0px 2px 4px  rgba(158, 158, 158, 0.25);
        border-radius: 50%;
        color: rgba(255, 255, 255, 1.00);
        cursor: pointer;
    }

    .review-title {
        width: 100%;
        height: 56px;
        background: rgba(80, 211, 225, 0.15);
        font-size: 22px;
        font-weight: 500;
        color: rgba(223, 238, 243, 1);
        padding: 12px 20px;
        display: flex;
        align-items: center;
    }

    .review-left {
        float: left;
        height: 810px;
        width: 450px;
        margin-top: 20px;

        .device-base-info-title {
            width: 100%;
            height: 60px;
            background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
            font-size: 20px;
            font-weight: 700;
            color: rgba(0, 255, 255, 1);
            display: flex;
            align-items: center;
            padding-left: 50px;
        }

        .device-base-info {
            margin-top: 20px;
            width: 100%;
            height: 150px;
            border-radius: 4px;
            background: rgba(13, 79, 90, 1);
            padding: 20px;

            .base-info {
                width: 100%;
                height: 100%;
                background: rgba(80, 211, 225, 0.15);
                font-size: 14px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                padding: 13px;

                .base-info-content {
                    margin-bottom: 12px;

                    .base-info-tag {
                        display: inline-block;
                        width: 70px;
                    }

                    .base-info-value {
                        display: inline-block;
                        margin-left: 25px;
                    }
                }
            }
        }

        .device-detail-info-title {
            width: 100%;
            height: 60px;
            background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
            font-size: 20px;
            font-weight: 700;
            color: rgba(0, 255, 255, 1);
            display: flex;
            align-items: center;
            padding-left: 50px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .device-detail-info {
            width: 100%;
            height: 490px;
            border-radius: 4px;
            background: rgba(13, 79, 90, 1);
            padding: 20px 20px 0 20px;

            .img-url{
                width: 100%;
                height: 230px;

                img {
                width: 100%;
                height: 100%;
            }
            }

            .recognition-result {
                margin-top: 20px;
                margin-left: 10px;
                font-size: 14px;
                font-weight: 500;
                color: rgba(229, 229, 229, 1);

                .el-radio {
                    margin-left: 10px;
                    margin-right: 10px;
                }

                .el-radio__label {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                }

                .el-radio__input .el-radio__input {
                    border: 1px solid rgba(229, 230, 235, 1);
                    background: rgba(13, 79, 90, 1);
                }

                .el-radio__input.is-checked .el-radio__inner {
                    border: 1px solid rgba(7, 131, 140, 1);
                    ;
                    background: rgba(7, 131, 140, 1);
                }
            }

            .detail-info {
                width: 100%;
                height: 36px;
                margin-top: 12px;

                .el-input__prefix {
                    width: 70px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                    font-size: 16px;
                    font-weight: 500;
                    color: rgba(166, 166, 166, 1);
                    border: none;
                }

                .el-input__inner {
                    padding-left: 100px;
                    padding-bottom: 1px;
                    width: 410px;
                    font-size: 14px;
                    font-weight: 500;
                    letter-spacing: 1px;
                    color: rgba(229, 229, 229, 1);
                    background: rgba(209, 209, 209, 0.15);
                    box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                    border: none;
                }

                .el-input__inner:disabled {
                    background: #606874;
               }

                .el-select-dropdown {
                    background: rgba(13, 79, 90, 1);
                    border: 2px solid rgba(17, 173, 240, 0.2);
                }

                .el-select-dropdown__item {
                    font-size: 14px;
                    font-weight: 500;
                    letter-spacing: 1px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-select-dropdown__item:hover {
                    /* background-color: rgba(52, 59, 69, 1); */
                    background: rgba(209, 209, 209, 0.15);
                    box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                    font-size: 16px;
                }

                .el-select-dropdown__item.selected {
                    color: #409EFF;
                }
            }

            .el-button {
                display: block;
                width: 80px;
                height: 36px;
                border-radius: 2px;
                background: rgba(80, 211, 225, 0.5);
                box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                font-size: 16px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                margin: 8px auto;
                padding: 10px 0;
                border: none;

            }
        }
    }

    .review-right {
        float: left;
        height: 810px;
        width: 1353px;
        margin-top: 20px;
        margin-left: 20px;

        .history-data-title {
            width: 100%;
            height: 60px;
            background: linear-gradient(90deg, rgba(0, 255, 255, 0.4) 0%, rgba(13, 128, 236, 0) 100%);
            font-size: 20px;
            font-weight: 700;
            color: rgba(0, 255, 255, 1);
            display: flex;
            align-items: center;
            padding-left: 50px;
        }

        .history-data-content {
            width: 100%;
            height: 730px;
            border-radius: 4px;
            background: rgba(13, 79, 90, 1);
            margin-top: 20px;
            padding: 20px;

            .history-data-search {
                display: flex;

                .custom-date {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(229, 229, 229, 1);
                    margin-right: 15px;
                }

                .el-input__prefix {
                    display: none;
                }

                .el-input__inner {
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(229, 229, 229, 1);
                    padding-left: 10px;
                    border: none;
                    background: rgba(209, 209, 209, 0.15);
                    box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                }

                .custom-btn {
                    flex: 1;
                    text-align: right;

                    .el-button {
                        border-radius: 2px;
                        background: rgba(80, 211, 225, 0.5);
                        box-shadow: inset 0px 0px 4px rgba(80, 211, 225, 0.25);
                        font-size: 16px;
                        font-weight: 500;
                        color: rgba(255, 255, 255, 1);
                        border: none;
                    }
                }
            }

            .history-data-chart {
                width: 100%;
                height: 210px;
                margin-top: 20px;
                margin-bottom: 20px;
            }

            .history-data-table {
                width: 100%;
                height: 368px;

                .el-table {
                    background: rgba(13, 79, 90, 1);
               }

                .el-table .el-table__row {
                    height: 40px;
                }

                .el-table th {
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    background: rgba(13, 79, 90, 1);
                    border: none;
                }

                .el-table td {
                    text-align: center;
                    font-size: 14px;
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                    background: rgba(13, 79, 90, 1);
                    border: none;
                }

                .el-table::before {
                    background: none;
                }

                .el-table__body tr:hover>td {
                    background: rgba(52, 59, 69, 1);
                }

                .el-table--medium th,
                .el-table--medium td {
                    padding: 4px 0;
                }
            }

            .el-divider--horizontal {
                height: 1px;
                background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(135, 135, 135, 0.5) 49.31%, rgba(255, 255, 255, 0) 100%);
                display: block;
                margin: 0;
            }

            .history-data-page {
                display: flex;
                justify-content: center;
                margin-top: 10px;

                .el-pagination__total {
                    width: 60px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border-radius: 4px;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                    text-align: center;
                }

                .el-pagination .btn-prev {
                    width: 24px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                }

                .el-pagination .btn-prev:hover {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-pagination .btn-quickprev {
                    width: 24px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                }

                .el-pagination .btn-quickprev:hover {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-pagination .btn-next {
                    width: 24px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                }

                .el-pagination .btn-next:hover {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-pagination .btn-quicknext {
                    width: 24px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                }

                .el-pagination .btn-quicknext:hover {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-pagination .number {
                    width: 24px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                }

                .el-pagination .number:hover {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-pagination .number.active {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }

                .el-pagination .el-icon-more {
                    width: 24px;
                    height: 28px;
                    background: rgba(13, 79, 90, 1);
                    color: rgba(193, 206, 222, 1);
                    font-size: 12px;
                    font-weight: 400;
                    border: 1px solid rgba(177, 200, 230, 0.2);
                }

                .el-pagination .el-icon-more:hover {
                    background: rgba(30, 119, 135, 1);
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}
</style>